<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html> 
<head> 
	<title>Content</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href='<c:url value="/styles/jquery.mobile-1.2.0.css"/>'/>
	<script src='<c:url value="/scripts/jquery-1.8.2.js"/>'></script>
	<script src='<c:url value="/scripts/jquery.mobile-1.2.0.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.jqueryplugin.js"/>'></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header" data-position="fixed">
		<h1>Jquery Mobile</h1>
	</div><!-- /header -->
	<div data-role="content" >	
		<div class="center-wrapper"><h1>Content</h1></div>
		<div class="center-wrapper">
		<div id="chartContainer">FusionCharts XT will load here!</div>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#chartContainer").insertFusionCharts({
						swfUrl: "MSLine.swf",
						renderer: "JavaScript",
						dataSource: "Data.xml",
						dataFormat: "xmlurl",
						width: "100%",
						height: "100%",
						id: "myChartId"
					});
				});
			</script> 
		</div> 
	</div><!-- /content -->
	<div data-role="footer" data-position="fixed">
		<div data-role="navbar" data-iconpos="right">
			<ul>
				<li><a data-icon="back" data-direction="reverse">Back</a></li>
				<li><a href="<c:url value='/pages/user/content.jsp'/>" data-icon="arrow-l" data-direction="reverse">words</a></li>
				<li><a data-icon="arrow-r" class="ui-btn-active ui-state-persist">charts</a></li>
				<li><a rel="external" href="<c:url value='/pages/user/login_success.jsp'/>" data-rel="home" data-icon="home">Menu</a></li>
			</ul>
		</div>
    </div>
</div><!-- /page -->
</body>
</html>